<template>
	<view class="coupon">
		<view class="coupon-tab">
			<u-tabs
				:list="list" 
				:scrollable="false"
				:current="current"
				lineColor="#CF1A1B"
				lineWidth="90"
				lineHeight="4"
				:activeStyle="{
					color: '#CF1A1B'
				}"
				:inactiveStyle="{
					color: 'rgba(0,0,0,0.65)'
				}"
				itemStyle="height: 44px;"
				@change="handleTab"
			>
			</u-tabs>
		</view>
		
		<view v-if="emptyVisible" class="empty">
			<image src="@/static/empty.png"></image>
			<text>无数据</text>
		</view>
		
		<view class="coupon-list">
			<view class="coupon-list-item" v-for="item of couponList" @click="handleDetail(item)">
				<view class="coupon-list-item-img">¥{{ item.denomination }}</view>
				<view class="coupon-list-item-info">
					<view class="use">
						<view class="use-name">
							<u-tag :text="item.couponTypeStr" type="error" plain size="mini" borderColor="#CF1A1B" color="#CF1A1B" ></u-tag>
							<text class="title">{{ item.displayName }}</text>
						</view>
						<view class="use-scope">
							<view class="use-scope-text">
								<text class="flag">使用范围：</text>
								<text class="data">{{ item.commodityType === '0' ? '全部轮胎' : '指定轮胎' }}</text>
							</view>
							<view class="use-scope-text">
								<text class="flag">有效期至：</text>
								<text class="data">{{ item.couponEndTime.slice(0,11) }}</text>
							</view>
						</view>
					</view>
					<view class="action">
						<u-button v-if="current === 0" shape="circle" size="mini" text="去使用" color="#CF1A1B" @click.native.stop="handleUse"></u-button>
						<image v-if="current === 1" src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/coupon_used.png" mode="aspectFit"></image>
						<image v-if="current === 2" src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/coupon_past.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			
			<uni-load-more :status="status" v-if="loadVisible"/>
		</view>
		
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	
	export default {
		data() {
			return {
				list: [{
					name: '待使用',
					index: 'nouse',
					status: ['0']
				}, {
					name: '已使用',
					index: 'used',
					status: ['1','2']
				}, {
					name: '已过期',
					index: 'past',
					status: ['3']
				}],
				current: 0,
				couponStatus: ['0'],
				couponList: [],					
				page: 1,
				size: 6,
				total: 0,
				status: 'more',
				loadVisible: false,
				emptyVisible: false,
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
		},
		onLoad() {
			uni.showLoading({
			  title: '加载中...'
			})
			this.getList()
		},
		onReachBottom() {
			if(this.couponList.length >= this.total) {
				this.status = 'noMore'
				return
			}
			this.loadVisible = true
			this.status = 'loading'
			this.page++ 
			this.getList('loading')
		},
		onPullDownRefresh() {
			this.loadVisible = false
			this.page = 1
			this.getList('refresh')
		},
		methods: {
			handleTab(item) {
				this.current = item.index
				this.couponStatus = item.status
				this.page = 1
				this.couponList = []
				this.loadVisible = false
				this.getList()
			},
			async getList(flag) {
				const res = await this.$request({
					method: 'POST',
					url: '/marketing-center/distribution/listByAPP',
					data: {
						userId: this.getUserInfo.id,
						couponStatusList: this.couponStatus,
						pageNum: this.page,
						pageSize: this.size
					}
				})
				if (flag === 'refresh') {
					this.couponList = []
				}
				this.couponList = this.couponList.concat(res.datas.data)
				this.total = res.datas.count
				this.loadVisible = this.total > this.size
				this.emptyVisible = this.total === 0
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			handleDetail(item) {
				if (item.couponStatus === '0') { // 待使用
					uni.navigateTo({
						url: `/minePack/coupon/detail?data=${JSON.stringify(item)}`
					})
				}
			},
			handleUse() {
				uni.navigateTo({
				    url: `/components/goodsList?index=hlt`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.coupon {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	/deep/ .u-tabs__wrapper__nav__line {
		margin-left: 22px;
	}
}
.coupon-tab {
	z-index: 99;
	position: fixed;
	width: 100%;
	top: 0;
	background-color: #FFFFFF;
}
.coupon-list {
	z-index: 1;
	margin: 50px 16px 16px;
	&-item {
		margin-bottom: 20rpx;
		display: flex;
		height: 100px;
		background-color: #FFFFFF;
		&-img {
			width: 116px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			font-weight: bold;
			color: #FFFFFF;
			background: url('https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/coupon_bg.png') no-repeat;
			background-size:100% 100%;
		}
		&-info {
			flex: 1;
			position: relative;
			padding: 20rpx;
			.use {
				line-height: 24px;
				display: flex;
				flex-direction: column;
				&-name {
					max-height: 32px;
					display: flex;
					align-items: center;
					.title {
						font-size: 14px;
						font-weight: 500;
						color: rgba(0,0,0,0.85);
						margin-left: 8rpx;
					}
				}
				&-scope {
					display: flex;
					flex-direction: column;
					padding-top: 10rpx;
					&-text {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						.flag {
							color: rgba(0,0,0,0.45);
						}
						.data {
							color: rgba(0,0,0,0.65);
						}
					}
				}
			}
			.action {
				position: absolute;
				right: 10px;
				top: 0;
				height: 98px;
				display: flex;
				align-items: center;
				image {
					width: 80px;
					height: 60px;
				}
			}
		}
	}
}
.empty {
	width: 100%;
	height: 80%;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	image {
		width: 220px;
		height: 180px;
	}
	text {
		font-size: 30rpx;
		color: rgba(0,0,0,0.45);
		line-height: 30rpx;
	}
}
</style>
